<template>
	<view class="content">
		
		<view class="top">
			<view class="top1">
				<image src="@/static/activity/healthHome/top.png" mode=""></image>
			</view>
			<view class="top2">
				<image src="@/static/activity/healthHome/classroom.png" mode=""></image>
			</view>
		</view>
		
		<view class="diss">
			<view class=""><i>{{description}}</i></view>
			<view style="margin: 0 6rpx;"><i>/</i></view>
			<view class=""><i>{{title}}</i></view>
		</view>
		
		<view class="videos">
			<video :src="videos"></video>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				description: null,
				title: null,
				videos: null,
			}
		},
		onLoad(opt) {
			this.description = opt.description
			this.title = opt.title
			this.videos = opt.video
		},
		methods: {}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('../../../../static/activity/healthHome/bj.jpg') 100% 100% / 100% 100%;
	}
	
	.top1 {
		width: 75%;
		height: 32rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}
	
	.top1>image {
		width: 100%;
		height: 100%;
	}
	
	.top2 {
		width: 88%;
		height: 250rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	
	.top2>image {
		width: 100%;
		height: 100%;
	}

	.diss {
		color: #0340A0;
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-top: 80rpx;
	}
	
	.videos {
		width: 90%;
		height: 400rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	
	.videos > video {
		width: 100%;
		height: 100%;
	}
</style>